<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:51:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:12:46
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-bottom.vue
-->
<template>
  <div class="right_bottom">
    <Echart :options="options" style="width:100%;height:260px" />
  </div>
</template>

<script>
import { currentGET } from 'api/modules';
export default {
  data() {
    return {
      options: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      currentGET('assetBuildType').then((res) => {
        if (res.success) {
          this.init(res.result);
        } else {
          this.$Message({
            text: res.msg,
            type: 'warning',
          });
        }
      });
    },
    init(data) {
      this.options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: data.map((item) => item.name),
          axisLine: {
            lineStyle: {
              color: '#B4B4B4',
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#B4B4B4',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)',
            },
          },
        },
        series: [
          {
            name: '价值',
            type: 'bar',
            data: data.map((item) => item.value),
            barWidth: '40%',
            itemStyle: {
              color: '#1E90FF',
            },
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.right_bottom {
  box-sizing: border-box;
  padding: 0 16px;
}
</style>